

<!DOCTYPE html>
<html lang="zh" xmlns:v-bind="http://www.w3.org/1999/xhtml">

<head><meta name="generator" content="Hexo 3.9.0">
    <title>分割一个长数组至 n 个 len 长度的小数组 - suke`s Notice</title>
<meta charset="utf-8">
<meta name="X-UA-Compatible" content="IE=edge">
<meta name="author" content="suke">
<meta name="description" content="场景
  拆分一个长列表[1,2,3,...n] 至 [[1,2,3],[1,2,3],[1,2,3]...] 配...">
<meta name="keywords" content="javascript html css php server npm nodejs">

<link rel="alternate" type="application/atom+xml" title="ATOM 1.0" href="/atom.xml">

    <meta charset="utf-8">
    <meta name="X-UA-Compatible" content="IE=edge">
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
    <meta content="telephone=no" name="format-detection">
    <meta name="renderer" content="webkit">
    <meta name="theme-color" content="#ffffff">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.1.3/dist/css/bootstrap.min.css" integrity="sha256-eSi1q2PG6J7g7ib17yAaWMcrr5GrtohYChqibrV7PBE=" crossorigin="anonymous">
<link rel="stylesheet" href="/css/journal.css?82904691">

<script src="/js/loadCSS.js"></script>
<script>
    loadCSS("https://fonts.googleapis.com/css?family=Lora|Montserrat|Fira+Mono|Material+Icons");
    (function (d) {
        var config = {
                kitId: 'dwg1tuc',
                scriptTimeout: 3000,
                async: true
            },
            h = d.documentElement, t = setTimeout(function () {
                h.className = h.className.replace(/\bwf-loading\b/g, "") + " wf-inactive";
            }, config.scriptTimeout), tk = d.createElement("script"), f = false,
            s = d.getElementsByTagName("script")[0], a;
        h.className += " wf-loading";
        tk.src = 'https://use.typekit.net/' + config.kitId + '.js';
        tk.async = true;
        tk.onload = tk.onreadystatechange = function () {
            a = this.readyState;
            if (f || a && a != "complete" && a != "loaded") return;
            f = true;
            clearTimeout(t);
            try {
                Typekit.load(config)
            } catch (e) {
            }
        };
        s.parentNode.insertBefore(tk, s)
    })(document);
</script>
<noscript>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lora|Montserrat|Anonymous+Pro:400|Material+Icons">
</noscript>
</head>
<body>
<div id="top"></div>
<div id="app">
<div class="single-column-drawer-container" ref="drawer" v-bind:class="{ 'single-column-drawer-container-active': isDrawerOpen }">
    <div class="drawer-content">
        <div class="drawer-menu">
            <a class="a-block drawer-menu-item false" href="https://sukeai.netlify.com">
                Home
            </a>
            

            
            
            <a class="a-block drawer-menu-item false" href="/firends/index.html">
                朋友👬
            </a>
            
            <a class="a-block drawer-menu-item false" href="/projects/index.html">
                空闲下来做的项目
            </a>
            
            <a class="a-block drawer-menu-item false" href="/about/index.html">
                关于我
            </a>
            

            
            <a class="a-block drawer-menu-item" href="/atom.xml">
                RSS
            </a>
            
        </div>
    </div>
</div>
<transition name="fade">
    <div v-bind:class="{ 'single-column-drawer-mask': mounted }" v-if="isDrawerOpen" v-on:click="toggleDrawer"></div>
</transition>
<nav ref="navBar" class="navbar sticky-top navbar-light single-column-nav-container">
    <div ref="navBackground" class="nav-background"></div>
    <div class="container container-narrow nav-content">
        <button id="nav_dropdown_btn" class="nav-dropdown-toggle" type="button" v-on:click="toggleDrawer">
            <i class="material-icons">
                menu
            </i>
        </button>
        <a ref="navTitle" class="navbar-brand" href="/">
            suke`s Notice
        </a>
    </div>
</nav>
<div class="single-column-header-container" ref="pageHead" v-bind:style="{ transform: 'translateZ(0px) translateY('+.3*scrollY+'px)', opacity: 1-navOpacity }">
    <a href="/">
        <div class="single-column-header-title">suke`s Notice</div>
        <div class="single-column-header-subtitle">hexo博客</div>
    </a>
</div>
<div ref="sideContainer" class="side-container">
    <a class="a-block nav-head false" href="/">
        <div class="nav-title">
            有猫病.
        </div>
        <div class="nav-subtitle">
             她的眼里有光,她爱的人是谁呢 
        </div>
    </a>

    <div class="nav-link-list">
        

        
        
        <a class="a-block nav-link-item false" href="/firends/index.html">
            朋友👬
        </a>
        
        <a class="a-block nav-link-item false" href="/projects/index.html">
            空闲下来做的项目
        </a>
        
        <a class="a-block nav-link-item false" href="/about/index.html">
            关于我
        </a>
        

        
        <a class="a-block no-tint nav-link-item" href="/atom.xml">
            RSS
        </a>
        
    </div>

    
    <div class="nav-footer">
        Proudly published with Hexo<br>
        
        Theme <a href="https://github.com/SumiMakito/hexo-theme-journal/" target="_blank" rel="noreferrer noopener">Journal.</a> by <a href="https://mak1t0.cc/" target="_blank" rel="noreferrer noopener">Makito</a><br>
        
        &copy; 2020 <a href="https://sukeai.netlify.com">suke`s Notice</a>
    </div>
</div>
<div ref="extraContainer" class="extra-container">
    <div class="pagination">
        <a id="globalBackToTop" class="pagination-action animated-visibility" href="#top" :class="{ invisible: scrollY == 0 }">
            <i class="material-icons pagination-action-icon">
                keyboard_arrow_up
            </i>
        </a>

        
    </div>
</div>



<div ref="streamContainer" class="stream-container">
    <div class="post-list-container post-list-container-shadow">
        <div class="post">
            <div class="post-head-wrapper-text-only" style="background-image: url('')">
                <div class="post-title">
                    分割一个长数组至 n 个 len 长度的小数组
                    <div class="post-meta">
                        <time datetime="2019-08-23T14:33:19.000Z" itemprop="datePublished">
                            2019-08-23 14:33
                        </time>&nbsp;
                        
    
                        
                    </div>
                </div>
            </div>
    
            <div class="post-body-wrapper">
                <div class="post-body">
                    <h2 id="场景"><a href="#场景" class="headerlink" title="场景"></a>场景</h2><blockquote>
<p>  拆分一个长列表<code>[1,2,3,...n]</code> 至 <code>[[1,2,3],[1,2,3],[1,2,3]...]</code> 配合套嵌循环，可以简单实现很多有趣的布局</p>
</blockquote>
<h2 id="效果"><a href="#效果" class="headerlink" title="效果"></a>效果</h2><blockquote>
<p>使用<code>flex</code>实现<code>Grid布局</code>,(这里flex好像作用不大哈哈 <code>float</code>也行)</p>
</blockquote>
<h2 id="思路"><a href="#思路" class="headerlink" title="思路"></a>思路</h2><table>
<thead>
<tr>
<th align="center">序号</th>
<th align="left">内容</th>
</tr>
</thead>
<tbody><tr>
<td align="center">1</td>
<td align="left">拆分列表之后，之际写了两个循环，例:<code>[[1,2,3],[1,2,3],[1,2,3]...]</code></td>
</tr>
<tr>
<td align="center">2</td>
<td align="left">第一级的item为<code>[1,2,3]</code>，也就是一行的内容</td>
</tr>
<tr>
<td align="center">3</td>
<td align="left">第二级就是单个icon的内容</td>
</tr>
</tbody></table>
<p><img src="https://i.loli.net/2019/08/23/buU3AjRgi9Xlzre.png" alt></p>
<blockquote>
<p>到这里html 结构就完成,html结构比较分明,利用css <code>nth-child</code>也可以实现一些比较有趣的效果，例如：<code>nth-child(odd)</code> 和  <code>nth-child(even)</code> 搭配实现棋盘样式，或者上图这种九宫格样式的内边框</p>
</blockquote>
<h2 id="代码"><a href="#代码" class="headerlink" title="代码"></a>代码</h2><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/**</span></span><br><span class="line"><span class="comment"> * // 分割一个长数组至 n 个 len 长度的小数组</span></span><br><span class="line"><span class="comment"> * @param &#123;Array&#125; arr 需要转换的数组</span></span><br><span class="line"><span class="comment"> * @param &#123;Number&#125; len 切割的长度</span></span><br><span class="line"><span class="comment"> */</span></span><br><span class="line"><span class="keyword">const</span> split_array = <span class="function">(<span class="params">arr, len</span>) =&gt;</span> &#123;</span><br><span class="line">	<span class="keyword">var</span> a_len = arr.length;</span><br><span class="line">	<span class="keyword">var</span> result = [];</span><br><span class="line">	<span class="keyword">for</span> (<span class="keyword">var</span> i = <span class="number">0</span>; i &lt; a_len; i += len) &#123;</span><br><span class="line">		result.push(arr.slice(i, i + len));</span><br><span class="line">	&#125;</span><br><span class="line">	<span class="keyword">return</span> result;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
                </div>
            </div>
    
            <nav class="post-pagination">
    
    <a class="newer-posts" href="/2019-11-27/express试水「1」.html">
        Previous post<br>express试水（1）「大淘客api」😎
    </a>
    
    <span class="page-number"></span>
    
    <a class="older-posts" href="/2019-08-23/javascript时间戳转指定格式.html">
        Next post<br>javascript时间戳转指定格式 ⌚️
    </a>
    
</nav>

    
            


        </div>
    </div>
    <div class="single-column-footer">
    Proudly published with Hexo<br>
    
    Theme <a href="https://github.com/SumiMakito/hexo-theme-journal/" target="_blank" rel="noreferrer noopener">Journal.</a> by <a href="https://mak1t0.cc/" target="_blank" rel="noreferrer noopener">Makito</a><br>
    
    &copy; 2020 <a href="https://sukeai.netlify.com">suke`s Notice</a>
</div>
</div>

</div>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.3.1/dist/jquery.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.14.4/dist/umd/popper.min.js" integrity="sha256-EGs9T1xMHdvM1geM8jPpoo8EZ1V1VRsmcJz8OByENLA=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.1.3/dist/js/bootstrap.min.js" integrity="sha256-VsEqElsCHSGmnmHXGQzvoWjWwoznFSZc6hs7ARLRacQ=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.min.js" integrity="sha256-FtWfRI+thWlNz2sB3SJbwKx5PgMyKIVgwHCTwa3biXc=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/smooth-scroll@14.2.1/dist/smooth-scroll.polyfills.min.js" integrity="sha256-CI4Gq5E0io1Pv0xM3qPM+NUIOhbIBvC3GiN1Y4KhXpw=" crossorigin="anonymous"></script>
<script src="/js/journal.js?90616835"></script>



</body>
</html>
